<template>
  <div class="training-detailed-container">
    <div class="top">
      <div class="training-img-box">
        <img v-if="detail.picPath" src="~@assets/images/course_login.png" v-real-img="detail.picPath" alt="">
        <img v-if="!detail.picPath" src="~@assets/images/course_login.png" alt="">
      </div>
      <div class="training-info">
        <div class="title ellipsis-one">{{$utils.unEscapeHTML(detail.tcName)}}</div>
        <div class="info">
         <!-- <div><span>主办单位：</span><span>{{detail.host}}</span></div>
          <div><span>承办单位：</span><span>{{detail.organizer}}</span></div>-->
          <div><span>班级学习时间：</span><span>{{detail.startTime}}至{{detail.endTime}}</span></div>
          <div v-if="tcDetail.isContainsExam == '0'"><span>参加考试时间：</span><span>{{detail.examBeginTime}}至{{detail.examEndTime}}</span></div>
          <!--<div><span>考核方式：</span><spakn>学时考核</span></div>-->
          <div>
            <!--<div><img src="~@assets/images/training-student.png" alt=""><span>8人</span></div>-->
            <div><img src="~@assets/images/training-time.png" alt=""><span>{{detail.credit}}课时</span></div>
            <!--<div><img src="~@assets/images/training-comment.png" alt=""><span>12</span></div>-->
          </div>
        </div>
        <div class="training-detail">
          <div class="traing-tip"></div>
          <div class="process">
            <div class="" v-if="tcDetail.isContainsCommon == '0'">
              <div class="title" v-if="$store.state.app.footer.webTemplateType.indexOf('V4') !== -1">必修课</div>
              <div class="title" v-else>公需课</div>
              <div class="progress">
                <div class="progress-detail" :style="{width: tcDetail.compulsorySchedule + '%'}"></div>
              </div>
              <div class="process-num">{{tcDetail.compulsorySchedule}}%</div>
            </div>
            <div class="" v-if="tcDetail.isContainsElective == '0'">
              <div class="title" v-if="$store.state.app.footer.webTemplateType.indexOf('V4') !== -1">选修课</div>
              <div class="title" v-else>专业课</div>
              <div class="progress">
                <div class="progress-detail" :style="{width: tcDetail.electiveSchedule + '%'}"></div>
              </div>
              <div class="process-num">{{tcDetail.electiveSchedule}}%</div>
            </div>
            <div v-if="tcDetail.isContainsExam == '0'">
              <div class="title">考试</div>
              <label :class="{checked:tcDetail.examSchedule !== '0'}">
                <input class="checkbox" type="checkbox" :checked="tcDetail.examSchedule !== '0'" disabled>
                未完成
              </label>
              <label :class="{checked:tcDetail.examSchedule == '0'}">
                <input class="checkbox" type="checkbox" :checked="tcDetail.examSchedule == '0'" disabled>
                已完成
              </label>
            </div>
            <div v-if="tcDetail.isContainsTask == '0'">
              <div class="title">作业</div>
              <!--选中的checkbox的label需要增加class=‘checked’-->
              <label :class="{checked:tcDetail.taskSchedule == '0'}">
                <input class="checkbox" type="checkbox" :checked="tcDetail.taskSchedule == '0'">
                没提交
              </label>
              <label :class="{checked:tcDetail.taskSchedule == '1'}">
                <input class="checkbox" type="checkbox" disabled :checked="tcDetail.taskSchedule == '1'">
                提交审核
              </label>
              <label :class="{checked:tcDetail.taskSchedule == '2'}">
                <input class="checkbox" type="checkbox" disabled :checked="tcDetail.taskSchedule == '2'">
                通过
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom clearfix">
      <div class="training-left">
        <div class="training-task">
          <div class="title">
            <h4>培训任务</h4>
          </div>
          <div :class="showMoreTask ? 'info ellipsis-two' : 'infoMore'">
            {{$utils.setText(detail.info)}}
          </div>
          <div class="training-task-btn" @click="showMoreTask = !showMoreTask">
            <span v-if="showMoreTask">展开 <i class="el-icon-arrow-down"></i></span>
            <span v-else>收起 <i class="el-icon-arrow-up"></i></span>
          </div>
        </div>
        <div class="training-content">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="必修课" name="required" v-if="tcDetail.isContainsCommon == '0' && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1"></el-tab-pane>
            <el-tab-pane label="公需课" name="required" v-if="tcDetail.isContainsCommon == '0' && $store.state.app.footer.webTemplateType.indexOf('V4') == -1"></el-tab-pane>
            <el-tab-pane label="线下档案上传" name="convert" v-if="tcDetail.isConfigConvert == '0'"></el-tab-pane>
            <el-tab-pane label="选修课" name="elective" v-if="tcDetail.isConfigConvert != '0' && tcDetail.isContainsElective == '0' && $store.state.app.footer.webTemplateType.indexOf('V4') !== -1"></el-tab-pane>
            <el-tab-pane label="专业课" name="elective" v-if="tcDetail.isConfigConvert != '0' && tcDetail.isContainsElective == '0' && $store.state.app.footer.webTemplateType.indexOf('V4') == -1"></el-tab-pane>
            <el-tab-pane label="考试" name="exam" v-if="tcDetail.isContainsExam == '0'"></el-tab-pane>
            <el-tab-pane label="练习" name="practice" v-if="tcDetail.isContainsPractice == '0'"></el-tab-pane>
            <el-tab-pane label="学习心得（论文）"  name="task" v-if="tcDetail.isContainsTask == '0'"></el-tab-pane>
            <el-tab-pane label="阅读资料" name="material" v-if="tcDetail.isContainsMaterial == '0'"></el-tab-pane>
            <el-tab-pane label="主题研讨" v-if="tcDetail.isContainsDiscuss == '0'" name="discussion"></el-tab-pane>
            <el-tab-pane label="调查问卷" name="questionnaire" v-if="tcDetail.isContainsNaire == '0'"></el-tab-pane>

          </el-tabs>
          <div class="training-content-container">
            <div class="required-course-container" v-show="activeName == 'required'">
              <div class="required-course-start-course"
                   v-if="(tcDetail.courseType == '0' ||( tcDetail.courseType == '2' && !tcDetail.isLockSelectCourse) )   &&  Number(tcDetail.totalCompulsory) !== 0 && Number(tcDetail.chooseCompulsory) === 0">
                <img src="~@assets/images/no-choose-course.png" alt="">
                <p>暂无选课，快选课开始您的学习吧!</p>
                <div class="required-course-start-choose-btn start-choose-btn" @click="chooseCourse('1')">开始选课</div>
              </div>
              <div class="required-course-content" v-else>
                  <!--自购课-->
                <div class="required-course-choose" v-if="tcDetail.canBuyCourse == '1'">
                  <img src="~@assets/images/choose-course.png" alt="">
                  <!--<div class="choose-info">
                    <p style="font-weight: 500;">您已完成规定学时选择</p>
                    <p style="font-weight: 500;">如有需要，可选择额外购买课程</p>
                  </div>-->
                  <div class="required-course-choose-btn choose-btn" @click="chooseCourse('0')">选购课程</div>
                </div>

                <div class="required-course-choose"
                     v-if="(tcDetail.courseType == '0' ||( tcDetail.courseType == '2' && !tcDetail.isLockSelectCourse) ) && Number(tcDetail.chooseCompulsory) > 0 && Number(tcDetail.chooseCompulsory) < Number(tcDetail.totalCompulsory)  ">
                  <img src="~@assets/images/choose-course.png" alt="">
                  <div class="choose-info">
                    <p>您已选择 <span class="required-course-selected-time">{{tcDetail.chooseCompulsory}}</span> 学时，还差 <span
                      class="required-course-remaining-time">{{Number(tcDetail.totalCompulsory) - Number(tcDetail.chooseCompulsory)}}</span>
                      学时</p>
                    <p>请完成选课开始学时吧！</p>
                  </div>
                  <div class="required-course-choose-btn choose-btn" @click="chooseCourse('1')">继续选课</div>
                </div>

                <!--管理员配课 锁定-->
                <div class="required-course-choose"
                     v-if="tcDetail.courseType == '2' && tcDetail.isLockSelectCourse  && Number(tcDetail.chooseCompulsory) < Number(tcDetail.totalCompulsory)  ">
                  <img src="~@assets/images/choose-course.png" alt="">
                  <div class="choose-info">
                    <p>您已选择 <span class="required-course-selected-time">{{tcDetail.chooseCompulsory}}</span> 学时，还差 <span
                      class="required-course-remaining-time">{{Number(tcDetail.totalCompulsory) - Number(tcDetail.chooseCompulsory)}}</span>
                      学时</p>
                    <p>请完成选课开始学时吧！</p>
                  </div>
                  <div class="required-course-choose-btn choose-btn" style="background: #666;cursor:not-allowed;">继续选课</div>
                </div>

                <div class="required-course-nav">
                  <div class="required-course-tip" v-if="Number( tcDetail.totalCompulsory) -  Number(tcDetail.finishCompulsory) > 0">
                    <img class="course-tip" src="~@assets/images/required-course-tip.png" alt="">
                    <span v-if="$store.state.app.footer.webTemplateType.indexOf('V4') !== -1">本次培训班您还需要完成 {{ Number( tcDetail.totalCompulsory) -  Number(tcDetail.finishCompulsory)}}学时必修课程的学习</span>
                    <span v-else>本次培训班您还需要完成 {{ Number( tcDetail.totalCompulsory) -  Number(tcDetail.finishCompulsory)}}学时公需课程的学习</span>
                    <!--<img class="colse" src="~@assets/images/colse-tip.png" alt="">-->
                  </div>
                  <ul class="required-course-status-nav">
                    <li :class="{ active: requiredListQuery.navStatus == '0'}" itemta-status="0"
                        @click="changeRequiredStatus('0')">未完成
                    </li>
                    <li :class="{ active: requiredListQuery.navStatus == '1'}" itemta-status="1"
                        @click="changeRequiredStatus('1')">已完成
                    </li>
                    <li :class="{ active: requiredListQuery.navStatus == ''}" itemta-status="2"
                        @click="changeRequiredStatus('')">全部
                    </li>
                  </ul>
                </div>
                <ul class="required-course-list">
                  <li class="required-course-item" v-for="(item,index) in requiredList" :key="item.courseId">
                    <div class="required-course-img-box">
                      <img src="~@assets/images/course_login.png" alt="" v-real-img="item.picPath">
                    </div>
                    <div class="required-course-detail">
                      <div class="required-course-info">
                        <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)">{{$utils.unEscapeHTML(item.name)}}
                        </div>
                        <div>授课老师：{{item.teacherName}}</div>
                        <div><span>发布时间：</span>{{item.publishTime}}</div>
                        <div><span>总时长：</span>{{parseInt(item.length / 60)}}分钟</div>
                        <div>
                          <!--<div><img src="~@assets/images/training-student.png" alt=""><span>8人</span></div>-->
                          <div><img src="~@assets/images/training-time.png" alt=""><span>{{item.credit}}课时</span></div>
                          <div class="self-buy" v-if="item.ownType == 'buy'">自购课程</div>
                          <!--<div><img src="~@assets/images/training-comment.png" alt=""><span>12</span></div>-->
                          <!--<div><img src="~@assets/images/training-collection.png" alt=""><span>12</span>-->
                        </div>
                      </div>
                      <div class="required-course-status-tip" v-if="item.isFinish == '0'">完成</div>
                      <div class="required-course-status-tip" v-if="item.isFinish == '1'">未完成</div>
                      <div class="dropCourse" @click="dropCourse(item.courseId)" style="display: none">
                        <span>退课</span>
                      </div>
                      <!--<div class="elective-course-drop-courses" v-if="item.schedule == '0'">退课</div>-->
                    </div>
                    <div class="course-detail" v-if="item.showCourseWare">
                      <ul class="clearfix">
                        <li>本课程包含</li>
                        <li>{{item.credit}}学时</li>
                      </ul>
                      <el-tabs v-model="item.activeName" v-if="item.examPercent  !== '0'" class="course-detail-tab" @tab-click="handleChangeTab(item)">
                        <el-tab-pane label="课程学习" name="course" v-if="item.courseWareList.length !== 0">
                          <div class="course-resouse" >
                            <ul>
                              <li v-for="(courseWare,courseWareIndex) in item.courseWareList" :key="courseWare.id">
                                <div>
                                  <h4>课</h4>
                                  <div class="course-learning-progress" @click="updateProgress(item,courseWare,item.courseWareList,courseWareIndex)">
                                    <div class="learned-section" :style="{'width':courseWare.schedule+'%'}">
                                      <div class="learned-section-num">{{courseWare.schedule}}%</div>
                                    </div>
                                  </div>
                                  <div class="required-course-play" @click="studyCourseware(courseWareIndex,item,courseWare)">
                                    <span>播放</span>
                                  </div>
                                </div>
                                <div class="course-learning-words-progress">
                                  <span>点击次数：{{courseWare.learnCount}}次</span><span>最后学习时间：{{courseWare.learnTime}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="课程考试" name="exam" v-if="item.examPercent  !== '0'">
                          <ul class="examList" >
                            <li class="clearfix" v-for="examItem in item.courseExamList" :key="examItem.paperId">
                              <div style="width: 69%;float:left;">
                                <div class="exam-title ellipsis-one">{{examItem.name}}</div>
                                <p>
                                  <span v-if="examItem.count !== '-1'">考试限次:{{examItem.count}}次</span>
                                  <span v-if="examItem.count == '-1'">考试限次:不限次</span>
                                  <span>考试限时:{{parseInt(examItem.time / 60 )}}分钟</span>
                                </p>
                              </div>
                              <div style="width: 27%;float: left;">
                                <div style="display: flex;justify-content: space-around;">
                                  <el-button type="primary"  v-if="(examItem.count == '-1' || parseInt(examItem.count) > examItem.examCount)"    @click="toExam(examItem.paperId,examItem.courseId)">开始考试</el-button>
                                  <el-button type="primary"  v-if="examItem.analysisType == '0' && examItem.examCount != '0'"     @click="toExamAnalysis(examItem.paperId,examItem.courseId)">查看解析</el-button>
                                </div>
                               <div style="display: flex;justify-content: space-around;">
                                 <p class="pass" v-if="examItem.isPass == '0'">考试分数：{{examItem.userScore}}分</p>
                                 <p  class="no-pass" v-if="examItem.isPass == '1'">考试分数：{{examItem.userScore}}分</p>
                               </div>
                              </div>
                            </li>

                          </ul>
                        </el-tab-pane>
                      </el-tabs>
                      <div v-else>
                        <div v-if="item.courseWareList.length !== 0 " class="course-resouse" >
                          <ul>
                            <li v-for="(courseWare,courseWareIndex) in item.courseWareList" :key="courseWare.id">
                              <div>
                                <h4>课</h4>
                                <div class="course-learning-progress"
                                     @click="updateProgress(item,courseWare,item.courseWareList,courseWareIndex)">
                                  <div class="learned-section" :style="{'width':courseWare.schedule+'%'}">
                                    <div class="learned-section-num">{{courseWare.schedule}}%</div>
                                  </div>
                                  <div class="required-course-play"
                                       @click="studyCourseware(courseWareIndex,item,courseWare)">
                                    <span>播放</span></div>
                                </div>
                              </div>
                              <div class="course-learning-words-progress">
                                <span>点击次数：{{courseWare.learnCount}}次</span><span>最后学习时间：{{courseWare.learnTime}}</span>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="know-status">
                      <div class="known" @click="findECourseWare(index,item)" v-if="!item.showCourseWare">
                        <p>详情</p>
                        <img src="~@assets/images/details-img.png" alt="">
                      </div>
                      <div class="unknown" @click="hideECourseWare(index,item)" v-if="item.showCourseWare">收起</div>
                    </div>
                  </li>
                </ul>
                <pagination class="center-pagination-theme" v-show="requiredTotal>0" :total="requiredTotal"
                            :page.sync="requiredListQuery.pageNum"
                            :limit.sync="requiredListQuery.pageSize"
                            layout="total, prev, pager, next, jumper"
                            @pagination="getRequiredList"/>

              </div>
            </div>
            <div class="elective-course-container" v-show="activeName == 'elective'">
              <div class="elective-course-start-course"
                   v-if="(tcDetail.courseType == '0' ||( tcDetail.courseType == '2' && !tcDetail.isLockSelectCourse) ) && Number(tcDetail.totalElective) !== 0  && Number(tcDetail.chooseElective) ==0">
                <img src="~@assets/images/no-choose-course.png" alt="">
                <p>暂无选课，快选课开始您的学习吧!</p>
                <div class="elective-course-start-choose-btn start-choose-btn" @click="chooseCourse('1')"> 开始选课</div>
              </div>
              <div class="elective-course-content" v-else>
                <!--自购课-->
                <div class="elective-course-choose" v-if="tcDetail.canBuyCourse == '1'">
                  <img src="~@assets/images/choose-course.png" alt="">
                 <!-- <div class="choose-info" >
                    <p style="font-weight: 500;">您已完成规定学时选择</p>
                    <p style="font-weight: 500;">如有需要，可选择额外购买课程</p>
                  </div>-->
                  <div class="elective-course-choose-btn choose-btn" @click="chooseCourse('0')">选购课程</div>
                </div>
                <div class="elective-course-choose"
                     v-if="(tcDetail.courseType == '0' ||( tcDetail.courseType == '2' && !tcDetail.isLockSelectCourse) ) && Number(tcDetail.chooseElective) > 0 && Number(tcDetail.chooseElective) < Number(tcDetail.totalElective) ">
                  <img src="~@assets/images/choose-course.png" alt="">
                  <div class="choose-info">
                    <p>您已选择 <span class="elective-course-selected-time">{{tcDetail.chooseElective}}</span> 学时，还差 <span
                      class="elective-course-remaining-time">{{Number(tcDetail.totalElective) - Number(tcDetail.chooseElective)}}</span>
                      学时</p>
                    <p>请完成选课开始学时吧！</p>
                  </div>
                  <div class="elective-course-choose-btn choose-btn" @click="chooseCourse('1')">继续选课</div>
                </div>
                <!--管理员配课 锁定-->
                <div class="elective-course-choose"
                     v-if="tcDetail.courseType == '2' && tcDetail.isLockSelectCourse  && Number(tcDetail.chooseElective) < Number(tcDetail.totalElective) ">
                  <img src="~@assets/images/choose-course.png" alt="">
                  <div class="choose-info">
                    <p>您已选择 <span class="elective-course-selected-time">{{tcDetail.chooseElective}}</span> 学时，还差 <span
                      class="elective-course-remaining-time">{{Number(tcDetail.totalElective) - Number(tcDetail.chooseElective)}}</span>
                      学时</p>
                    <p>请完成选课开始学时吧！</p>
                  </div>
                  <div class="elective-course-choose-btn choose-btn" style="background: #666;cursor:not-allowed;">继续选课</div>
                </div>

                <div class="elective-course-nav">
                  <div class="elective-course-tip" v-if="Number(tcDetail.totalElective) -  Number(tcDetail.finishElective) > 0">
                    <img class="course-tip" src="~@assets/images/required-course-tip.png" alt="">
                    <span v-if="$store.state.app.footer.webTemplateType.indexOf('V4') !== -1">本次培训班您还需要完成{{ Number(tcDetail.totalElective) -  Number(tcDetail.finishElective)}}学时选修课程的学习</span>
                    <span v-else>本次培训班您还需要完成{{ Number(tcDetail.totalElective) -  Number(tcDetail.finishElective)}}学时专业课程的学习</span>
                    <!--<img class="colse" src="~@assets/images/colse-tip.png" alt="">-->
                  </div>
                  <ul class="elective-course-status-nav">
                    <li :class="{ active: electiveListQuery.navStatus == '0'}" itemta-status="0"
                        @click="changeElectiveStatus('0')">未完成
                    </li>
                    <li :class="{ active: electiveListQuery.navStatus == '1'}" itemta-status="1"
                        @click="changeElectiveStatus('1')">已完成
                    </li>
                    <li :class="{ active: electiveListQuery.navStatus == ''}" itemta-status="2"
                        @click="changeElectiveStatus('')">全部
                    </li>
                  </ul>
                </div>
                <ul class="elective-course-list">
                  <li class="elective-course-item" v-for="(item,index) in electiveList" :key="item.courseId">
                    <div class="elective-course-img-box">
                      <img src="~@assets/images/course_login.png" alt="" v-real-img="item.picPath">
                    </div>
                    <div class="elective-course-detail">
                      <div class="elective-course-info">
                        <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)">{{$utils.unEscapeHTML(item.name)}}
                        </div>
                        <div>授课老师：{{item.teacherName}}</div>
                        <div><span>发布时间：</span>{{item.publishTime}}</div>
                        <div><span>总时长：</span>{{parseInt(item.length / 60)}}分钟</div>
                        <div>
                          <!--<div><img src="~@assets/images/training-student.png" alt=""><span>8人</span></div>-->
                          <div><img src="~@assets/images/training-time.png" alt=""><span>{{item.credit}}课时</span></div>
                          <div class="self-buy" v-if="item.ownType == 'buy'">自购课程</div>
                          <!--<div><img src="~@assets/images/training-comment.png" alt=""><span>12</span></div>-->
                          <!--<div><img src="~@assets/images/training-collection.png" alt=""><span>12</span>-->
                        </div>
                      </div>
                      <div class="elective-course-status-tip" v-if="item.isFinish == '0'">完成</div>
                      <div class="elective-course-status-tip" v-if="item.isFinish == '1'">未完成</div>
                      <div class="dropCourse" @click="dropCourse(item.courseId)" style="display: none">
                        <span>退课</span>
                      </div>
                      <!--<div class="elective-course-drop-courses" v-if="item.schedule == '0'">退课</div>-->
                    </div>
                    <div class="course-detail" v-if="item.showCourseWare">
                      <ul class="clearfix">
                        <li>本课程包含</li>
                        <li>{{item.credit}}学时</li>
                      </ul>
                      <el-tabs v-model="item.activeName" v-if="item.examPercent && item.examPercent !== '0'" class="course-detail-tab" @tab-click="handleChangeTab(item)">
                        <el-tab-pane label="课程学习" name="course" v-if="item.courseWareList.length !== 0">
                          <div class="course-resouse">
                            <ul>
                              <li v-for="(courseWare,courseWareIndex) in item.courseWareList" :key="courseWare.id">
                                <div>
                                  <h4>课</h4>
                                  <div class="course-learning-progress"
                                       @click="updateProgress(item,courseWare,item.courseWareList,courseWareIndex)">
                                    <div class="learned-section" :style="{'width':courseWare.schedule+'%'}">
                                      <div class="learned-section-num">{{courseWare.schedule}}%</div>
                                    </div>
                                  </div>
                                  <div class="required-course-play" v-show="courseWare.dataSource == 'OPEN_EDUCATION_PLATFORM'" @click="openCourseware(courseWareIndex,item,courseWare)">
                                    <span>播放</span>
                                  </div>
                                  <div class="required-course-play" v-show="courseWare.dataSource != 'OPEN_EDUCATION_PLATFORM'" @click="studyCourseware(courseWareIndex,item,courseWare)">
                                    <span>播放</span>
                                  </div>
                                </div>
                                <div class="course-learning-words-progress">
                                  <span>点击次数：{{courseWare.learnCount}}次</span><span>最后学习时间：{{courseWare.learnTime}}</span>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="课程考试" name="exam" v-if="item.examPercent !== '0'">
                          <ul class="examList">
                            <li class="clearfix" v-for="examItem in item.courseExamList" :key="examItem.paperId">
                              <div style="width: 69%;float:left;">
                                <div class="exam-title ellipsis-one">{{examItem.name}}</div>
                                <p>
                                  <span v-if="examItem.count !== '-1'">考试限次:{{examItem.count}}次</span>
                                  <span v-if="examItem.count == '-1'">考试限次:不限次</span>
                                  <span>考试限时:{{parseInt(examItem.time / 60 )}}分钟</span>
                                </p>
                              </div>
                              <div style="width: 27%;float: left;">
                                <div style="display: flex;justify-content: space-around;">
                                  <el-button type="primary"  v-if="(examItem.count == '-1' || parseInt(examItem.count) > examItem.examCount)"    @click="toExam(examItem.paperId,examItem.courseId)">开始考试</el-button>
                                  <el-button type="primary"  v-if="examItem.analysisType == '0' && examItem.examCount != '0'"     @click="toExamAnalysis(examItem.paperId,examItem.courseId)">查看解析</el-button>
                                </div>
                                <div style="display: flex;justify-content: space-around;">
                                  <p class="pass" v-if="examItem.isPass == '0'">考试分数：{{examItem.userScore}}分</p>
                                  <p  class="no-pass" v-if="examItem.isPass == '1'">考试分数：{{examItem.userScore}}分</p>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </el-tab-pane>
                      </el-tabs>
                      <div v-else>
                        <div class="course-resouse" v-if="item.courseWareList.length !== 0">
                          <ul>
                            <li v-for="(courseWare,courseWareIndex) in item.courseWareList" :key="courseWare.id">
                              <div>
                                <h4>课</h4>
                                <div class="course-learning-progress" @click="updateProgress(item,courseWare,item.courseWareList,courseWareIndex)" >
                                  <div class="learned-section" :style="{'width':courseWare.schedule+'%'}">
                                    <div class="learned-section-num">{{courseWare.schedule}}%</div>
                                  </div>
                                </div>
                                <div class="required-course-play" v-show="courseWare.dataSource == 'OPEN_EDUCATION_PLATFORM'" @click="openCourseware(courseWareIndex,item,courseWare)">
                                  <span>播放</span>
                                </div>
                                <div class="required-course-play" v-show="courseWare.dataSource != 'OPEN_EDUCATION_PLATFORM'"  @click="studyCourseware(courseWareIndex,item,courseWare)">
                                  <span>播放</span>
                                </div>
                              </div>
                              <div class="course-learning-words-progress">
                                <span>点击次数：{{courseWare.learnCount}}次</span><span>最后学习时间：{{courseWare.learnTime}}</span>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="know-status">
                      <div class="known" @click="findECourseWare(index,item)" v-if="!item.showCourseWare">
                        <p>详情</p>
                        <img src="~@assets/images/details-img.png" alt="">
                      </div>
                      <div class="unknown" @click="hideECourseWare(index,item)" v-if="item.showCourseWare">收起</div>
                    </div>
                  </li>
                </ul>
                <pagination class="center-pagination-theme" v-show="electiveTotal>0" :total="electiveTotal"
                            :page.sync="electiveListQuery.pageNum"
                            :limit.sync="electiveListQuery.pageSize"
                            layout="total, prev, pager, next, jumper"
                            @pagination="getElectiveList"/>
              </div>
            </div>
            <div class="exam-container" v-show="activeName == 'exam'">
              <ul class="exam-list">
                <li v-for="item in examList" :key="item.paperId">
                  <div class="exam-img-box">
                    <img src="~@assets/images/training-exam.png" alt="">
                  </div>
                  <div class="exam-info">
                    <div class="title">{{item.name}}</div>
                    <div>满分/及格分：{{item.score}}/{{item.passScore}}，限考：
                      <span v-if="item.count == '-1'">不限次</span>
                      <span v-else>{{item.count}}</span>
                    </div>
                    <div>题量：{{item.questionCount}}（
                      <span v-if="item.type1Count && item.type1Count != ''">判断题 {{item.type1Count}} </span>
                      <span v-if="item.type2Count && item.type2Count != ''">单选题 {{item.type2Count}} </span>
                      <span v-if="item.type3Count && item.type3Count != ''">多选题 {{item.type3Count}} </span>
                      ）
                    </div>
                    <div class="time-limit">限时：<span>{{parseInt(item.time / 60)}} </span>分钟</div>
                  </div>
                  <div class="exam-tip">
                    <div class="mobile-tip" v-if="item.platform == '2' || item.platform == '3' ">
                      <img src="~@assets/images/mobile-tip-logo.png" alt="">
                      <span>移动</span>
                    </div>
                    <div class="online-tip" v-if="item.platform == '1' || item.platform == '3'">
                      <img src="~@assets/images/online-tip-logo.png" alt="">
                      <span>在线</span>
                    </div>
                  </div>
                  <div class="score-no-pass" v-if="item.examCount == '0'">
                    <div style="font-size: 23px;">0 分</div>
                    <div>尚未参加考试！</div>
                  </div>
                  <div class="score-pass"
                       v-if="item.examCount != '0' && Number(item.userScore) >= Number(item.passScore)">
                    <div style="font-size: 23px;">{{item.userScore}}分</div>
                    <div>恭喜您，已通过考试！</div>
                  </div>
                  <div class="score-no-pass" v-if="item.examCount != '0' && item.userScore == ''">
                    <div style="font-size: 23px;">'+'0分</div>
                    <div>尚未参加考试！</div>
                  </div>
                  <div class="score-no-pass"
                       v-if="item.examCount != '0' && item.userScore != '' && item.isPass  == '1'">
                    <div style="font-size: 23px;">{{item.userScore}}分</div>
                    <div>未通过，还需努力！</div>
                  </div>
                  <div class="examBtnContainer">
                    <!--在考试时间范围之内且考试不限次或者考试次数未用尽-->
                    <div class="startExam" @click="toExam(item.paperId)"
                         v-if="$utils.compareDate(detail.examBeginTime,new Date(),detail.examEndTime) && (item.count == '-1' || parseInt(item.count) > item.examCount) && tcDetail.canJoinExam == '1'">
                      开始考试
                    </div>
                    <div class="startExam" @click="toExamAnalysis(item.paperId)"
                         v-if="item.analysisType == '0' && item.examCount != '0' && $utils.compareDate(detail.examBeginTime,new Date(),detail.examEndTime)">
                      查看解析
                    </div>
                  </div>

                </li>
              </ul>
              <pagination class="center-pagination-theme" v-show="examTotal>0" :total="examTotal"
                          :page.sync="examListQuery.pageNum"
                          :limit.sync="examListQuery.pageSize"
                          layout="total, prev, pager, next, jumper"
                          @pagination="getExamList"/>
            </div>
            <div class="convert-container" v-show="activeName == 'convert'">
              <div  class="convert-content">
                <div v-if="convertList.length == 0">
                  <img src="~@assets/images/convert.png" alt="">
                  <el-button type="primary" @click="openConvert">线下档案上传</el-button>
                </div>
                <div v-if="convertList.length !== 0">
                  <el-table
                    :data="convertList"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="createTime"
                      label="时间"
                      width="200px"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="title"
                      label="标题"
                      width="400px"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      label="状态">
                      <template slot-scope="scope">
                        <el-link style="cursor:default;" :underline="false" :type="scope.row.status | statusFilter">{{scope.row.status  | statusNameFilter}}</el-link>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                    >
                      <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row,scope.row.status)" type="text" size="small" v-if="scope.row.status == '0'">编辑</el-button>
                        <el-button @click="handleEdit(scope.row,scope.row.status)" type="text" size="small" v-if="scope.row.status == '2' || scope.row.status == '3'">查看</el-button>
                        <el-button v-if="scope.row.status == '0' || scope.row.status == '1'"  @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>

                  </el-table>
                  <el-button type="primary" style="margin-top: 20px;" @click="openConvert">继续申请</el-button>
                </div>
              </div>
            </div>
            <div class="practice-container" v-show="activeName == 'practice'">
              <ul class="exam-list">
                <li v-for="item in practiceList" :key="item.paperId">
                  <div class="exam-img-box">
                    <img src="~@assets/images/training-practice.png" alt="">
                  </div>
                  <div class="exam-info">
                    <div class="title">{{item.name}}</div>
                    <div>满分/及格分：{{item.score}}/{{item.passScore}}，限考：
                      <span v-if="item.count == '-1'">不限次</span>
                      <span v-else>{{item.count}}</span>
                    </div>
                    <div>题量：{{item.questionCount}}（
                      <span v-if="item.type1Count && item.type1Count != ''">判断题 {{item.type1Count}} </span>
                      <span v-if="item.type2Count && item.type2Count != ''">单选题 {{item.type2Count}} </span>
                      <span v-if="item.type3Count && item.type3Count != ''">多选题 {{item.type3Count}} </span>
                      ）
                    </div>
                    <div class="time-limit">限时：<span>{{parseInt(item.time / 60)}} </span>分钟</div>
                  </div>
                  <div class="exam-tip">
                    <div class="mobile-tip" v-if="item.platform == '2' || item.platform == '3' ">
                      <img src="~@assets/images/mobile-tip-logo.png" alt="">
                      <span>移动</span>
                    </div>
                    <div class="online-tip" v-if="item.platform == '1' || item.platform == '3'">
                      <img src="~@assets/images/online-tip-logo.png" alt="">
                      <span>在线</span>
                    </div>
                  </div>
                  <!-- <div class="score-no-pass" v-if="item.examCount == '0'">
                     <div style="font-size: 23px;">0 分</div>
                     <div>尚未参加考试！</div>
                     </div>
                     <div class="score-pass"
                      v-if="item.examCount != '0' && Number(item.userScore) >= Number(item.passScore)">
                     <div style="font-size: 23px;">{{item.userScore}}分</div>
                     <div>恭喜您，已通过考试！</div>
                     </div>
                     <div class="score-no-pass" v-if="item.examCount != '0' && item.userScore == ''">
                     <div style="font-size: 23px;">'+'0分</div>
                     <div>尚未参加考试！</div>
                     </div>
                     <div class="score-no-pass"
                      v-if="item.examCount != '0' && item.userScore != '' && item.isPass  == '1'">
                     <div style="font-size: 23px;">{{item.userScore}}分</div>
                     <div>未通过，还需努力！</div>
                     </div>-->
                  <!--在考试时间范围之内且考试不限次或者考试次数未用尽-->
                  <div class="examBtnContainer">
                    <div class="startExam" @click="toPractice(item.paperId)"
                         v-if="$utils.compareDate(detail.examBeginTime,new Date(),detail.examEndTime)">
                      开始考试
                    </div>
                  </div>
                </li>
              </ul>
              <pagination class="center-pagination-theme" v-show="practiceTotal>0" :total="practiceTotal"
                          :page.sync="practiceListQuery.pageNum"
                          :limit.sync="practiceListQuery.pageSize"
                          layout="total, prev, pager, next, jumper"
                          @pagination="getPracticeList"/>
            </div>
            <div class="task-container" v-show="activeName == 'task'">
              <div class="task-requirements">
                <h1>论文要求</h1>
                <span>{{taskNotice.taskInfo}}</span>
              </div>
              <div class="create-new-thesis"  v-if="taskTotal !== 0">
                <div class="f-left create-thesis-btn" @click="creatTask">
                  <i class="el-icon-circle-plus"></i>新建论文
                </div>
                <div class="f-right">您还需提交{{taskTotal}}篇论文，请尽快完成！</div>
              </div>
              <ul class="homework-thesis-ul" v-if="taskList.length != 0">
                <li class="thesis-item-box" v-for="item in taskList" :key="item.id">
                  <div class="content">
                    <div class="thesis-item-head">
                      <h4 class="title">{{item.filename}}</h4>
                      <div>
                        <span>提交时间：{{item.createtime}}</span>
                        <span class="status" :class="taskstatusFilter(item.status)">{{taskStatusNameFilter(item.status)}}</span>
                      </div>
                    </div>
                    <div class="operate">
                      <span class="preview"  v-if="item.status == '1' || item.status == '0'" @click="previewTaskContent(item)">预览</span>
                      <span  v-if="item.status == '4' || item.status == '2'" @click="editTaskContent(item)">修改</span>
                      <span  v-if="item.status != '1'" @click="delTask(item.id)">删除</span>
                    </div>
                  </div>
                  <div class="error" v-if="item.status == '2'">
                    {{item.remark}}
                  </div>
                </li>
              </ul>
            </div>
            <div class="discussion-container" v-show="activeName == 'discussion'">
              <ul class="listContainer">
                <li @click="toDiscussion()">
                  <div class="clearfix">
                    <div class="fl titleWapper">
                      <span>999+</span>
                      <div class="ellipsis-one title" title="《弘扬梦想精神，实现伟大复兴》专题讨论">《弘扬梦想精神，实现伟大复兴》专题讨论</div>
                    </div>
                    <div class="fr">
                      <span>回应数：1212</span>
                      <span>开放时间：2021-1-19 <span class="time">11:00 - 16:00</span></span>
                    </div>
                  </div>
                  <div class="content ellipsis-two">
                    梦想，是对未来的一种期望，更是一种鼓舞人奋进的强大精神力量。<br>
                    弘扬梦想精神，就是要以梦想为动力和精神牵引，敢于追梦、勤于圆梦，自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡
                  </div>
                </li>
                <li class="list">
                  <div class="clearfix">
                    <img src="~@assets/images/failure.png" alt="">
                    <div class="fl titleWapper">
                      <span>999+</span>
                      <div class="ellipsis-one title" title="《弘扬梦想精神，实现伟大复兴》专题讨论">《弘扬梦想精神，实现伟大复兴》专题讨论</div>
                    </div>
                    <div class="fr">
                      <span>回应数：1212</span>
                      <span>开放时间：2021-1-19 <span class="time">11:00 - 16:00</span></span>
                    </div>
                  </div>
                  <div class="content ellipsis-two">
                    梦想，是对未来的一种期望，更是一种鼓舞人奋进的强大精神力量。<br>
                    弘扬梦想精神，就是要以梦想为动力和精神牵引，敢于追梦、勤于圆梦，自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡
                  </div>
                </li>
                <li>
                  <div class="clearfix">
                    <div class="fl titleWapper">
                      <span>999+</span>
                      <div class="ellipsis-one title" title="《弘扬梦想精神，实现伟大复兴》专题讨论">《弘扬梦想精神，实现伟大复兴》专题讨论</div>
                    </div>
                    <div class="fr">
                      <span>回应数：1212</span>
                      <span>开放时间：2021-1-19 <span class="time">11:00 - 16:00</span></span>
                    </div>
                  </div>
                  <div class="content ellipsis-two">
                    梦想，是对未来的一种期望，更是一种鼓舞人奋进的强大精神力量。<br>
                    弘扬梦想精神，就是要以梦想为动力和精神牵引，敢于追梦、勤于圆梦，自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡
                  </div>
                </li>
                <li class="list">
                  <div class="clearfix">
                    <img src="~@assets/images/failure.png" alt="">
                    <div class="fl titleWapper">
                      <span>999+</span>
                      <div class="ellipsis-one title" title="《弘扬梦想精神，实现伟大复兴》专题讨论">《弘扬梦想精神，实现伟大复兴》专题讨论</div>
                    </div>
                    <div class="fr">
                      <span>回应数：1212</span>
                      <span>开放时间：2021-1-19 <span class="time">11:00 - 16:00</span></span>
                    </div>
                  </div>
                  <div class="content ellipsis-two">
                    梦想，是对未来的一种期望，更是一种鼓舞人奋进的强大精神力量。<br>
                    弘扬梦想精神，就是要以梦想为动力和精神牵引，敢于追梦、勤于圆梦，自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡自觉做新时代的坚定巴拉巴拉巴巴把阿布卡巴巴把阿布卡
                  </div>
                </li>
              </ul>

            </div>
            <div class="material-container" v-show="activeName == 'material'">
              <ul class="material-list" id="material-list">
                <li class="clearfix" v-for="item in materialList" :key="item.id">
                  <div class="type-img">
                    <img v-if='item &&  item.path && item.path.indexOf(".txt") > -1' src="~@assets/images/T.png" alt="">
                    <img
                      v-if='item && item.path && item.path.indexOf(".doc") > -1 || item &&  item.path && item.path.indexOf(".docx") > -1'
                      src="~@assets/images/W.png" alt="">
                    <img v-if='item &&  item.path && item.path.indexOf(".ppt") > -1' src="~@assets/images/P.png" alt="">
                    <img v-if='item &&  item.path && item.path.indexOf(".pdf") > -1' src="~@assets/images/PDF.jpg" alt="">
                    <img
                      v-if='item &&  item.path && item.path.indexOf(".xls") > -1 || item && item.path && item.path.indexOf(".xlsx") > -1'
                      src="~@assets/images/X.png" alt="">
                    <img v-if='item &&  item.resourceType === "link"' src="~@assets/images/L.jpg" alt="">
                  </div>
                  <div class="content">
                    <h3 class="title" :title="item.filename">{{item.filename}}</h3>
                    <!--<div>
					  <span>浏览：20</span>
					  <span>下载：20</span>
					</div>-->
                  </div>
                  <div class="materialBtn">
                    <!--<div class="toRead">浏览</div>-->
                    <div class="toLoad" @click="downFile(item.path,item.filename,item.resourceType,item.id)">下载</div>
                  </div>
                </li>
                <!--  <li>
					<div class="type-img">
					  <img src="~@assets/images/P.png" alt="">
					</div>
					<div class="content">
					  <h3 class="title">《基层党建专题训练》相关资料</h3>
					  <div>
						<span>浏览：20</span>
						<span>下载：20</span>
					  </div>
					</div>
					<div class="materialBtn">
					  <div class="toRead">浏览</div>
					  <div class="toLoad">下载</div>
					</div>
				  </li>
				  <li>
					<div class="type-img">
					  <img src="~@assets/images/W.png" alt="">
					</div>
					<div class="content">
					  <h3 class="title">《基层党建专题训练》相关资料</h3>
					  <div>
						<span>浏览：20</span>
						<span>下载：20</span>
					  </div>
					</div>
					<div class="materialBtn">
					  <div class="toRead">浏览</div>
					  <div class="toLoad">下载</div>
					</div>
				  </li>
				  <li>
					<div class="type-img">
					  <img src="~@assets/images/X.png" alt="">
					</div>
					<div class="content">
					  <h3 class="title">《基层党建专题训练》相关资料</h3>
					  <div>
						<span>浏览：20</span>
						<span>下载：20</span>
					  </div>
					</div>
					<div class="materialBtn">
					  <div class="toRead">浏览</div>
					  <div class="toLoad">下载</div>
					</div>
				  </li>
				  <li>
					<div class="type-img">
					  <img src="~@assets/images/Z-I-P.png" alt="">
					</div>
					<div class="content">
					  <h3 class="title">《基层党建专题训练》相关资料</h3>
					  <div>
						<span>浏览：20</span>
						<span>下载：20</span>
					  </div>
					</div>
					<div class="materialBtn">
					  <div class="toRead">浏览</div>
					  <div class="toLoad">下载</div>
					</div>
				  </li>-->
              </ul>
              <pagination class="center-pagination-theme" v-show="materialTotal>0" :total="materialTotal"
                          :page.sync="materialListQuery.pageNum"
                          :limit.sync="materialListQuery.pageSize"
                          layout="total, prev, pager, next, jumper"
                          @pagination="getMaterialList"/>
            </div>
            <div class="questionnaire-container" v-show="activeName == 'questionnaire'">
              <ul class="questionnaire-list" id="questionnaire-list">
                <li v-for="item in questionnaireList" :key="item.naireId">
                  <h3 class="title" :title="item.name">
                    <img src="~@assets/images/questionnaire-read.png" alt="">{{item.name}}
                  </h3>

                  <div @click="toQuestionnaire(item.naireId)"
                       v-if="item.finishStatus == '1' && endTime >= 0"
                       class="choose-btn start-choose-btn">点击进入
                  </div>
                  <div v-if="item.finishStatus == '0' && endTime >= 0 " class="choose-btn complete-btn"
                       @click="toQuestionnaireAnalysis(item.naireId)"
                  >已完成
                  </div>
                </li>
              </ul>
              <pagination class="center-pagination-theme" v-show="questionnaireTotal>0" :total="questionnaireTotal"
                          :page.sync="questionnaireListQuery.pageNum"
                          :limit.sync="questionnaireListQuery.pageSize"
                          layout="total, prev, pager, next, jumper"
                          @pagination="getQuestionnaireList"/>
            </div>
          </div>
        </div>
      </div>
      <div class="training-right">
        <div class="title">
          <h1>培训班助手</h1>
          <p>Training Assistant</p>
        </div>
        <div class="middle">
          <div class="training-date">
            {{detail.startTime}} <span>至</span> {{detail.endTime}}
          </div>
          <div class="training-time">
            <div v-if="endTime > 0">
              <span class="training-time-num" v-for="item  in endTimeArr">{{item}}</span>
              <strong>天</strong>
            </div>
            <div v-if="endTime < 0">
              <span class="training-time-num">0</span>
              <strong>天</strong>
            </div>
            <div class="countdown" v-if="endTime == 0" v-html="endTimeCount"> <!--注意这里没有全部没有空格--></div>
          </div>
          <p>距离培训结束还有</p>
        </div>
        <!-- <div class="traing-notice">
		   <div>
			 <h4>培训任务</h4>
			 <div class="operating-instructions">
			   <img src="~@assets/images/operating-instructions.png" alt="">
			   <span>操作须知</span>
			 </div>
		   </div>
		   <ul class="traing-notice-list">
			 <li>
			   <div>
				 <img src="~@assets/images/notice-Icon.png" alt="">
			   </div>
			   <div class="traing-notice-content ellipsis-two" title="公告新闻示例公告新闻公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻">
				 公告新闻示例公告新闻11公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻
			   </div>
			 </li>
			 <li>
			   <div>
				 <img src="~@assets/images/notice-Icon.png" alt="">
			   </div>
			   <div class="traing-notice-content ellipsis-two" title="公告新闻示例公告新闻公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻">
				 公告新闻示例公告新闻公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻
			   </div>
			 </li>
			 <li>
			   <div>
				 <img src="~@assets/images/notice-Icon.png" alt="">
			   </div>
			   <div class="traing-notice-content ellipsis-two" title="公告新闻示例公告新闻公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻">
				 公告新闻示例公告新闻公告新闻公告新闻告新闻公告新闻告新闻公告新闻告新闻公告新闻
			   </div>
			 </li>
		   </ul>
		 </div>-->
        <div class="training-requirements" v-if="!detail.isAllowApplyCert">
          <h4>学习要求</h4>
          <ul class="clearfix">
            <li v-if="detail.compulsoryTarget && detail.compulsoryTarget !== ''">
              <div>
                <img src="~@assets/images/required-course-img-logo.png" alt="">
                <span v-if="$store.state.app.footer.webTemplateType.indexOf('V4') !== -1">必修课</span>
                <span v-else>公需课</span>
              </div>
              <div>
                <span>{{detail.compulsoryTarget}}</span>
                学时
              </div>
            </li>
            <li v-if="detail.electiveTarget && detail.electiveTarget !== ''">
              <div>
                <img src="~@assets/images/required-course-img-logo.png" alt="">
                <span>选修课</span>
              </div>
              <div>
                <span>{{detail.electiveTarget}}</span>
                学时
              </div>
            </li>
            <li v-if="detail.examTarget && detail.examTarget !== '0'">
              <img src="~@assets/images/exam-img-logo.png" alt="">
              <span>考试</span>
              <div>
                <span>{{detail.examTarget}}</span>
                场
              </div>
            </li>
            <li v-if="detail.naireTarget && detail.naireTarget !== '0'">
              <img src="~@assets/images/questionnaire-img-logo.png" alt="">
              <span>调查问卷</span>
              <div>
                <span>{{tcDetail.naireTarget}}</span>
                次
              </div>
            </li>

          </ul>
        </div>
        <div class="training-requirements" v-if="!detail.isAllowApplyCert">
          <h4>可获得</h4>
          <ul class="clearfix">
            <li>
              <img src="~@assets/images/required-course-img-logo.png" alt="">
              <span>{{detail.credit}}学时</span>
            </li>
            <li>
              <img src="~@assets/images/certificate-img-logo.png" alt="">
              <span>证书</span>
            </li>
          </ul>
        </div>
        <div class="training-requirements" v-if="detail.isAllowApplyCert">
          <el-button plain @click="getCertRecord" :disabled="tcDetail && tcDetail.tcSchedule &&  tcDetail.tcSchedule.indexOf('100')  !== -1  ? false : true "  style="width: 100%;">申请证书</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      :title="statusMap[statusText] + '论文'"
      :visible.sync="taskVisible"
      v-if="taskVisible"
      width="70%"
      :before-close="handleClose">
      <el-form ref="taskFrom" :model="taskFrom" :rules="taskFromRules" label-width="80px" :disabled="statusText == 'preview'">
        <el-form-item label="论文名称" prop="name">
          <el-input v-model="taskFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="论文内容" prop="fileUrl">
          <UploadFile
            :fileType="['application/pdf']"
            :slotTip="'.pdf'"
            :importApi="uploadFile"
            :fileUrl="taskFrom.fileUrl"
            :filePath="taskFrom.filePath"
            :fileName="taskFrom.name"
            :resourceType="'.pdf'"
            :onSuccess="hanldUploadSuccess"
            @update="hanldUpdate"
          />
          <!--<div class="editor">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="taskFrom.content"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
              @onChange="onChange"
            />
          </div>
          <div style="text-align:right;">当前已输入{{editLength}}个字符,</div>-->
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitTask('4')">保存草稿</el-button>
         <el-button type="primary"  @click="submitTask('0')">提交</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="线下档案上传"
      :visible.sync="convertVisible"
      width="70%"
      :before-close="closeConvert"
    >
      <el-form ref="convertFrom" :disabled="formReadonly" label-position="left" :model="convertFrom" :rules="convertFromRules" label-width="80px">
        <p style="color:red;margin-bottom: 16px;">温馨提示：如有多次学时证明，在本页面提交一次即可。学时填写各次学时总数（只填写数字），附件可最多上传8张图片。</p>
        <el-form-item v-if="convertFrom.auditReason && convertFrom.status == '3'" label="驳回原因"  prop="auditReason"  style="color:red;">
          <p>{{convertFrom.auditReason}}</p>
        </el-form-item>
        <el-form-item label="培训名称"  prop="title" >
          <el-input style="width: 500px;"  v-model="convertFrom.title" placeholder="请输入培训名称"></el-input>
        </el-form-item>
        <el-form-item label="培训内容"  prop="trainingContent" >
          <el-input style="width: 500px;" class="trainingContent" resize="none" :autosize="{ minRows: 2}" type="textarea"   maxlength="40" show-word-limit  v-model="convertFrom.trainingContent" placeholder="请输入培训内容"></el-input>
        </el-form-item>
        <el-form-item label="培训类别"  prop="converttType" >
          <el-select v-model="convertFrom.convertType"  disabled style="width: 500px;"  placeholder="请选择培训类别">
            <el-option
              v-for="item in convertType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训时间"  prop="trainingTime" >
          <el-date-picker
            v-model="convertFrom.trainingTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训年份"  prop="trainingYear" >
          <el-input style="width: 500px;"  v-model="convertFrom.trainingYear" placeholder="请输入培训年份"></el-input>
        </el-form-item>
        <el-form-item label="培训机构"  prop="trainingOrg" >
          <el-input style="width: 500px;"  v-model="convertFrom.trainingOrg" placeholder="请输入培训机构"></el-input>
        </el-form-item>
        <el-form-item label="获得学时"  prop="convertCredit" >
          <el-input style="width: 500px;" @input="formatInput"  v-model="convertFrom.convertCredit" placeholder="请输入获得学时"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" >
          <el-input style="width: 500px;" resize="none" class="trainingContent" :autosize="{ minRows: 2}" type="textarea"   maxlength="40" show-word-limit  v-model="convertFrom.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="上传证明(限制1M)"  prop="resourceList">
          <el-upload
            action="#"
            ref="upload"
            list-type="picture-card"
            :on-remove="handleRemove"
            :http-request="(e) => {handleHttpUpload(e)}"
            :file-list="convertFrom.resourceList"
            :on-success="uploadSuccess"
            accept="image/*"
            :limit="8"
            :on-exceed="uploadExceed"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>

        </el-form-item>
        <div>

        </div>

      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" :disabled="formReadonly" @click="submitConvert('0')">保存草稿</el-button>
         <el-button type="primary" :disabled="formReadonly"  @click="submitConvert('1')">提交</el-button>
        <el-button @click="closeConvert">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="申请证书"
      :visible.sync="userCertRecordFlag"
      custom-class="userCertRecord"
    >
      <div>
        <p>请您根据个人完成所需考核学时，统一申请培训证书，感谢您的支持！</p>
        <p>（证书申请次数每年度最高为
          <span v-if="userCertRecord.applyCertLimit ">
            限制{{userCertRecord.applyCertLimit}}次
          </span>，您还可以申请
          <span v-if="userCertRecord.applyCertLimit && userCertRecord.applyTimeList">
            {{userCertRecord.applyCertLimit - userCertRecord.applyTimeList.length}}次
          </span>）
        </p>
      </div>
      <el-link type="primary" :underline="false" class="link"  v-if="userCertRecord.applyTimeList && userCertRecord.applyTimeList.length !== 0">申请记录</el-link>
      <ul v-if="userCertRecord.applyTimeList && userCertRecord.applyTimeList.length !== 0">
        <li v-for="(item,index) in userCertRecord.applyTimeList" :key="index">{{item}} 您申请证书成功</li>
      </ul>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" v-debounce="applyCret">确定</el-button>
        <el-button @click="userCertRecordFlag =false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import index from "./indexjs"

  export default {

    ...index
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";

</style>
